<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			@keyframes squareAnimation{
				from{
					stroke-dashoffset:400
				}
				to{
					stroke-dashoffset:0
				}
			}
			rect {
				animation: squareAnimation 2s;
			}
			.icon {
				position: absolute;
				top: 55px;
				left: 105px;
			}
			.icon img {
				width: 90px;
				height: 90px;
			}
			@keyframes imgbg{
				from{
					opacity: 0;
				}
				to{
					opacity: 1;
				}
			}
			.icon {
				opacity: 0;
				animation: imgbg 2s 1.5s forwards;
			}
		</style>
	</head>
	<body>
		<svg width="400" height="300">
			<rect x="100" y="50" 
			width="100" height="100" 
			stroke="green" fill="none" 
			stroke-width="4" stroke-dasharray="400" stroke-dashoffset="400"
			stroke-linecap="square"></rect>
		</svg>
		<div class="icon">
			<img src="dog.jpg" alt="">
		</div>
	</body>
</html>
